<template>
  <div class="myBox">
    <!-- <Head @showMenu="showMn = true" class="header" /> -->
    <Menu :showMenu="showMn" @closeMenu="showMn = false" />
    <div class="page-nav">
      <div class="back-content" @click.stop="goToBack">
        <span class="icon iconfont back">&#xe6dc;</span>
      </div>
      <div class="page-title">My Box</div>
    </div>
    <div class="myBox-content">
       <div class="table">
               <div class="no-data" v-if="data.length==0">
                   
                      <span class="icon iconfont empty">&#xe642;</span>
               </div>
          </div>
    </div>
  </div>
</template>

<script>
import Head from "../../../components/head/header.vue";
import Menu from "../../../components/menu";
import { mapState } from "vuex";
export default {
  name: "myBox",
  components: {
    Head,
    Menu,
  },
  computed: {
    ...mapState([
      "bgColor",
      "reviewSearchBgColor",
      "color",
      "nav_bc",
      "main_bc_opacity",
      "main_bc_0_8",
      "main_color_0_1",
      "main_color_0_1_1",
      "main_bc_invert",
      "content_bc",
      "sub_color",
      "text_color",
      "dm_bc",
      "price_border",
      "main_bc_color",
      "item_bc",
      "menu_color",
      "unboxing_im_bc",
      "menu_d_bg",
      "menu_border",
      "pop_bg",
      "main_bc_color",
      "tab_bc"
    ]),

    
  },
  mounted(){
   this.active =  this.$route.query.type
  },
  data() {
    return {
        active:0,
      showMn: false,
      titles:['ALL','CONDUCT','COMPLETED'],
      data:[]
    };
  },
  methods: {
    goToBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.myBox {
  height: 100%;
  width: 100%;
  .header {
    position: relative;
  }
  .page-nav {
    width: 100%;
    height: 52px;
    background: var(--content-bc);
    padding-right: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
    // margin-top: 96px;
    color: var(--text-color);
    .back-content {
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      .back {
        font-size: 22px;
        font-weight: 600;
      }
    }
    .page-title {
      font-size: 16px;
      font-weight: 500;
      margin: auto;
    }
  }
  .table{
    background: var(--main-bc-color);
    .no-data {
        color: #fff;
    /* font-size: 74px; */
    margin: 0 auto;
    text-align: center;
    margin-top: 88px;
    .empty{
        font-size: 57px;
    }
    }

  }
}
</style>